<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>赵延斌茅山奇门遁甲排盘在线排盘</title>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/angularjs/angular.min.js}"></script>

<style>
	.container { height: 700px; width: 370px;float:left; }
	.container .tableBox { height: 100%; width: 350px; background: pink;float:left; }
	.container .tableBox .trBox { background: green; height: 100px; }
	.container .tableBox .trBox .tdBox { width: 80px;  }
</style>

</head>

<body ng-app="qimen" ng-controller="qimenController">
	<div class="container">
		
		<div class="tableBox">
			<form name="reg_testdate">
				<select name="YYYY" onchange="YYYYDD(this.value)" ng-model="year"   >
					<option value="">请选择 年</option>
				</select>
				<select name="MM" onchange="MMDD(this.value)" ng-model="month">
					<option value="">选择 月</option>
				</select>
				<select name="DD" ng-model="day">
					<option value="">选择 日</option>
				</select>
				<select name="hour" ng-model="hours">
					<option value="">选择 小时
					<option value="0">0时</option>
					<option value="1">1时</option>
					<option value="2">2时</option>
					<option value="3">3时</option>
					<option value="4">4时</option>
					<option value="5">5时</option>
					<option value="6">6时</option>
					<option value="7">7时</option>
					<option value="8">8时</option>
					<option value="9">9时</option>
					<option value="10">10时</option>
					<option value="11">11时</option>
					<option value="12">12时</option>
					<option value="13">13时</option>
					<option value="14">14时</option>
					<option value="15">15时</option>
					<option value="16">16时</option>
					<option value="17">17时</option>
					<option value="18">18时</option>
					<option value="19">19时</option>
					<option value="20">20时</option>
					<option value="21">21时</option>
					<option value="22">22时</option>
					<option value="23">23时</option>
				</select>
				<button ng-click="paipan()">排盘</button>
			</form>

			<script language="JavaScript">
				function YYYYMMDDstart()
				{
					MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

					//先给年下拉框赋内容
					var y  = new Date().getFullYear();
					for (var i = (y-50); i < (y+50); i++) //以今年为准，前30年，后30年
						document.reg_testdate.YYYY.options.add(new Option(" "+ i +" 年", i));

					//赋月份的下拉框
					for (var i = 1; i < 13; i++)
						document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));

					document.reg_testdate.YYYY.value = y;
					document.reg_testdate.MM.value = new Date().getMonth() + 1;
					var n = MonHead[new Date().getMonth()];
					if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
					writeDay(n); //赋日期下拉框Author:meizz
					document.reg_testdate.DD.value = new Date().getDate();
				}
				if(document.attachEvent)
					window.attachEvent("onload", YYYYMMDDstart);
				else
					window.addEventListener('load', YYYYMMDDstart, false);
				function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
				{
					var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
					if (MMvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}
					var n = MonHead[MMvalue - 1];
					if (MMvalue ==2 && IsPinYear(str)) n++;
					writeDay(n)
				}
				function MMDD(str)   //月发生变化时日期联动
				{
					var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
					if (YYYYvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}
					var n = MonHead[str - 1];
					if (str ==2 && IsPinYear(YYYYvalue)) n++;
					writeDay(n)
				}
				function writeDay(n)   //据条件写日期的下拉框
				{
					var e = document.reg_testdate.DD; optionsClear(e);
					for (var i=1; i<(n+1); i++)
						e.options.add(new Option(" "+ i + " 日", i));
				}
				function IsPinYear(year)//判断是否闰平年
				{     return(0 == year%4 && (year%100 !=0 || year%400 == 0));}
				function optionsClear(e)
				{
					e.options.length = 1;
				}
				</script>
			<div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年
				&nbsp;&nbsp;&nbsp;&nbsp;月
				&nbsp;&nbsp;&nbsp;&nbsp;日
				&nbsp;&nbsp;时
			</div>
			<div id="sizhu"></div>
			<div id="shensha"></div>
			<div id="jieqi"></div>
			<div id="zhifu">时旬：甲子戊 值符：天柱 值使：惊门</div>
			<div id="kongwang">时空：戌亥空亡</div>
			<table class="table">
				<tbody>
					<tr class="trBox">

						<td data="4" class="tdBox">

							<table>
								<tbody style="float:left;">
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;巳
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.shen.4}}</td>
									</tr>
									<tr>
										<td>辰&nbsp;&nbsp;{{allDate.xing.4}} {{allDate.tianpangan.4}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.men.4}} {{allDate.dipangan.4}}</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td data="9" class="tdBox">
							<table>
								<tbody>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;午
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.shen.9}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.xing.9}} {{allDate.tianpangan.9}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.men.9}} {{allDate.dipangan.9}}</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td data="2" class="tdBox">
							<table>
								<tbody>
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未
									<tr>
										<td>{{allDate.shen.2}}</td>
									</tr>
									<tr>
										<td>{{allDate.xing.2}} {{allDate.tianpangan.2}}&nbsp;&nbsp;&nbsp;申</td>
									</tr>
									<tr>
										<td>{{allDate.men.2}} {{allDate.dipangan.2}}</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr class="trBox">
						<td data="3" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.shen.3}}</td>
									</tr>
									<tr>
										<td>卯&nbsp;&nbsp;{{allDate.xing.3}} {{allDate.tianpangan.3}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.men.3}} {{allDate.dipangan.3}}</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td data="5" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.dipangan.5}}</td>
									</tr>
								</tbody>
							</table>
						</td>
						<td data="7" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>{{allDate.shen.7}}</td>
									</tr>
									<tr>
										<td>{{allDate.xing.7}} {{allDate.tianpangan.7}}&nbsp;&nbsp;&nbsp;酉</td>
									</tr>
									<tr>
										<td>{{allDate.men.7}} {{allDate.dipangan.7}}</td>
									</tr>
								</tbody>
							</table>
						</td>
					</tr>
					<tr class="trBox">
						<td data="8" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.shen.8}}</td>
									</tr>
									<tr>
										<td>寅&nbsp;&nbsp;{{allDate.xing.8}} {{allDate.tianpangan.8}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.men.8}} {{allDate.dipangan.8}}</td>
									</tr>
								</tbody>
							</table>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;丑
						</td>
						<td data="1" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.shen.1}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.xing.1}} {{allDate.tianpangan.1}}</td>
									</tr>
									<tr>
										<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{allDate.men.1}} {{allDate.dipangan.1}}</td>
									</tr>
								</tbody>
							</table>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;子
						</td>
						<td data="6" class="tdBox">
							<table>
								<tbody>
									<tr>
										<td>{{allDate.shen.6}}</td>
									</tr>
									<tr>
										<td>{{allDate.xing.6}} {{allDate.tianpangan.6}}&nbsp;&nbsp;&nbsp;戌</td>
									</tr>
									<tr>
										<td>{{allDate.men.6}} {{allDate.dipangan.6}}</td>
									</tr>
								</tbody>
							</table>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;亥
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div style="float:left;">
		<img th:src="@{/img/nashou.png}"/>
	</div>

	<script th:src="@{/js/jquery.min.js}"></script>
	<script type="text/javascript">

		var app = angular.module('qimen',[]);

		app.controller("qimenController",['$scope','$http',function($scope,$http,year,month,day,hours){
			$scope.year = year|| (new Date().getFullYear());
			$scope.month = month || (new Date().getMonth()+1);
			$scope.day = day|| (new Date().getDate());
			$scope.hours = hours|| (new Date().getHours());

			$scope.paipan = function(){
				$http.post('http://localhost:8081/qimenDate',{"year":$scope.year,"month":$scope.month,"day":$scope.day,"hours":$scope.hours}).success(function (data) {
					$scope.allDate = data;
					$("#sizhu").html(
							"四柱 ：" + data.sizhu.year + "&nbsp;" + data.sizhu.month
							+ "&nbsp;" + data.sizhu.day + "&nbsp;"
							+ data.sizhu.hours + "&nbsp;");
					$("#jieqi").html(
							"节气 ：" + data.jieqi.jieqiName + "&nbsp;&nbsp;元数"
							+ data.jieqi.shangZhongXia + "&nbsp;&nbsp;"
							+ data.jieqi.yinYang + data.jieqi.juNumber
							+ "局");

					$("#zhifu").html(
							"旬首 ：" + data.xunshou + "&nbsp;&nbsp;值符:" + data.zhifuxing
							+ "&nbsp;&nbsp;值使:" + data.zhishimen);

					$("#kongwang").html("  年干空亡 ：" + data.niangankongwang+"  月干空亡 ：" + data.yuegankongwang+"<br/>"+"日干空亡 ：" + data.rigankongwang+"  时干空亡 ：" + data.kongwang);
					$("#shensha").html(
							"年神煞：  "+"马星："+data.nianshensha.马星+"|  贵人："+data.nianshensha.贵人+"|  桃花："+data.nianshensha.桃花+""
							+"<br/>"+"禄神："+data.nianshensha.禄神+"|  胎神："+data.nianshensha.胎神+"|  破："+data.nianshensha.破
							+"<br/>"+"月神煞：  "+"马星："+data.yueshensha.马星+"|  贵人："+data.yueshensha.贵人+"|  桃花："+data.yueshensha.桃花+""
							+"<br/>"+"禄神："+data.yueshensha.禄神+"|  胎神："+data.yueshensha.胎神+"|  破："+data.yueshensha.破
							+"<br/>"+"日神煞：  "+"马星："+data.rishensha.马星+"|  贵人："+data.rishensha.贵人+"|  桃花："+data.rishensha.桃花+""
							+"<br/>"+"禄神："+data.rishensha.禄神+"|  胎神："+data.rishensha.胎神+"|  破："+data.rishensha.破
							+"<br/>"+"时神煞：  "+"马星："+data.shishensha.马星+"|  贵人："+data.shishensha.贵人+"|  桃花："+data.shishensha.桃花+""
							+"<br/>"+"禄神："+data.shishensha.禄神+"|  胎神："+data.shishensha.胎神+"|  破："+data.shishensha.破
					);
				})
			}
			$scope.paipan();

		}]);

	</script>
</body>
</html>
